<template>
	<view class="news-form">
		<uni-forms :modelValue="formData">
			<view class="ban">
				<uni-forms-item required label="标题" name="username">
					<input inputBorder="false" class="no-border-input" type="text" v-model="formData.title" :styles="styles" placeholder="请输入标题" />
				</uni-forms-item>
				<uni-forms-item required label="排序号" name="order_num">
					<input inputBorder="false" class="no-border-input" type="text" v-model="formData.order_num" :styles="styles" placeholder="请输入排序号" />
				</uni-forms-item>
				<uni-forms-item required label="类型" name="name">
					<uni-combox :border="false" :candidates="newsType" :options="options" placeholder="请选择" v-model="formData.type"></uni-combox>
				</uni-forms-item>
			</view>
			<view class="ban2">
				<uni-forms-item required label="请填写内容" name="price" label-width="90px">
					<textarea name="content" id="content" cols="20" rows="10" v-model="formData.content"></textarea>
				</uni-forms-item>
			</view>
			<view class="ban3">
				<uni-forms-item required label="封面图片上传(必填)" name="name" label-width="320rpx">
					<text>(每张不能超过10M)</text>
				</uni-forms-item>
				<uni-forms-item>
					<view class="example-body">
						<uni-file-picker v-model="imageValue" 
							fileMediatype="image" 
							mode="grid" 
							@select="select" 
							@progress="progress" 
							@success="success" 
							@fail="fail"  limit="3" title="最多选择3张图片">
						</uni-file-picker>
					</view>
				</uni-forms-item>
			</view>
		</uni-forms>
		<button @click="submitForm">提交</button>
	</view>
</template>

<script>
	import { AddHelper, GetNewsOrderNum, AddNews } from '../../api/index.js'
	export default {
		data() {
			return {
				imageValue:[],
				formData:{
					title:'',
					order_num:0,
					content:'',
					type:'',
					cover:''
				},
				formData1:{
					username:'',
					order_num:0,
					isCancel:0,
					days:30,
					phone:'',
					password:'',
					price:100,
					school:'',
					level:'',
					star:'',
					certificate:[],
					birth_year:'',
					nation:'汉族',
					age:'',
					experience:'',
					native_place:'',
					disc:'',
					avatar:'',
					time:'',
					date_time:''
				},
				certificateList:[
					{text:'背调合格',value:'背调合格'},
					{text:'保证金已缴纳',value:'保证金已缴纳'},
					{text:'身份证',value:'身份证'},
					{text:'健康证',value:'健康证'},
					{text:'体检报告',value:'体检报告'},
					{text:'执业证书',value:'执业证书'}
				],
				options:[
					{text:'服务介绍',value:'1'},
					{text:'最新动态',value:'2'},
					{text:'最新活动',value:'3'}
				],
				styles:{
					// color: '#2979FF',
					borderColor: '#fff'
				},
				dataTree:[
					{text:'随时可以取消',value:1},
					{text:'不可以取消',value:0},
				],
				classes:'',
				levelList: ['金牌','银牌'],
				newsType: ['服务介绍','最新动态','最新活动'],
				diploma:['小学','初中','高中','职高','专科','本科','研究生'],
				starList:['0星','1星','2星','3星','4星','5星'],
				birthYear:['鼠','牛','虎','兔','龙','蛇','马','羊','猴','鸡','狗','猪'],
				nationList:['汉族','回族','藏族','苗族','壮族','傣族','少数民族'],
				item:{},
				selectedList:[]
				
				
			};
		},
		methods:{
			async getNewsOrderNum() {
				const {data:res} = await GetNewsOrderNum()
				console.log(res,'getnum')
				this.formData.order_num = res.data.order_num+1
			},
			// / 获取上传状态
			select(e){
				console.log('选择文件：',e)
				let that = this
				uni.uploadFile({
					url:'http://localhost:3002/api/helper/upload',
					name:'file',
					filePath:e.tempFilePaths[0],
					success(res) {
						console.log(res,'res')
						console.log(JSON.parse(res.data),'resss')
						console.log(this,'this')
						console.log(that,'that')
						that.formData.cover = JSON.parse(res.data).url
					}
				})
			},
			// 获取上传进度
			progress(e){
				console.log('上传进度：',e)
			},
			
			// 上传成功
			success(e){
				console.log(e,'上传成功')
			},
			
			// 上传失败
			fail(e){
				console.log('上传失败：',e)
			},
			goSetTime(){
				let date_time = this.useableDay
				if(this.formData.id){
					return uni.navigateTo({
						url:`/subPackageAdmin/TimeSet/TimeSet?date_time=${date_time}&&time=${JSON.stringify(this.timeDuration)}`
					})
				}
				uni.navigateTo({
					url:`/subPackageAdmin/TimeSet/TimeSet?date_time=${date_time}`
				})
			},
			getValue(e){
				console.log(e,'yemian')
				this.selectedList = e.selected
				// this.formData.date_time = 
				let dateTimeStr = ''
				let timeStr = ''
				e.selected.forEach(item=>{
					dateTimeStr += item.date+'*'+item.info+','
				})
				e.time.forEach(item=>{
					timeStr += item.start+'-'+item.end+'*'+item.status+','
				})
				console.log(dateTimeStr,'datetimestr')
				this.formData.date_time = dateTimeStr
				
				this.formData.time = timeStr
				console.log(timeStr,'timestr')
			},
			async submitForm(){
				console.log(this.formData)
				// this.formData.certificate=this.formData.certificate.join(',')
				const { data:res } = await AddNews(this.formData)
				console.log(res,'hhhh')
				
			},
			onnodeclick(e) {
				console.log(e,'onnodeclick');
			},
			onpopupopened(e) {
				console.log(e,'popupopened','onpopupopened');
			},
			onpopupclosed(e) {
				console.log(e,'popupclosed');
			},
			onchange(e) {
				console.log('onchange:', e.detail.value[0].value);
				this.formData.isCancel = e.detail.value[0].value
			}
			
		},
		onLoad(options) {
			console.log(options.item,'ooppp')
			
			if(options.item){
				uni.setNavigationBarTitle({
					title:'编辑动态'
				})
				
				this.formData = JSON.parse(options.item||'')
				// this.formData.isCancel = [JSON.parse(options.item||'').isCancel]
				// this.formData.certificate = JSON.parse(options.item||'').certificate.split(',')
				this.imageValue = [{url:JSON.parse(options.item||'').cover}]
			}else{
				this.getNewsOrderNum()
			}
			
		},
		computed:{
			// useableDay(){
			// 	let arr = this.formData.date_time.slice(0,this.formData.date_time.length-1).split(',')
			// 	let res = arr.map(item=>{
			// 		return item.split('*')[0]
			// 	})
			// 	console.log(res,'ffres')
			// 	return res
			// },
			// timeDuration(){
				
			// 	let arrtime = this.formData.time.slice(0,this.formData.time.length-1).split(',')
			// 	let ress = arrtime.map(item=>{
			// 		console.log(item,'iiitt')
			// 		let status = item.split('-')[1]?.split('*')[1]
			// 		let obj = {start:item.split('-')[0],end:item.split('-')[1]?.split('*')[0],status}
			// 		return obj
			// 	})
			// 	console.log(ress,'ffrestime')
			// 	return ress
				
				
			// }
		}
	}
</script>

<style lang="scss">

	.example-body{
		margin: 20rpx 0;
		padding-bottom: 10rpx;
		.uni-file-picker{
			width: 400rpx;
			// height: 200rpx;
		}
		.icon-del-box{
			width: 30rpx;
			height: 30rpx;
			.icon-del{
				width: 20rpx;
			}
			
		}
	}
	.no-border-input:focus {
	    border: none; /* 去掉边框 */
	    outline: none; /* 去掉聚焦时的轮廓 */
	  }
	  .is-input-border{
		  border: none;
	  }
.news-form{
	padding: 20rpx;
	.uni-forms{
		// background: #fff;
		padding: 20rpx;
		.ban{
			background: #fff;
			border-radius: 10rpx;
			margin-bottom: 20rpx;
			.uni-forms-item:nth-child(1){
				display: flex;
				justify-content: flex-start;
				.no-border-input:focus {
				    border: none; /* 去掉边框 */
				    outline: none; /* 去掉聚焦时的轮廓 */
				  }
			}
			.no-border-input:focus {
			    border: none; /* 去掉边框 */
			    outline: none; /* 去掉聚焦时的轮廓 */
			  }
			
		}
		.ban1{
			background: #FFFACD;
			border-radius: 10rpx;
			margin-bottom: 20rpx;
		}
		.ban2{
			background: #fff;
			border-radius: 10rpx;
			padding: 6rpx;
			padding-top: 15rpx;
			box-sizing: border-box;
			textarea{
				width: 470rpx;
				padding: 10rpx;
				border: 1px solid #eee;
				box-sizing: border-box;
			}
			.uni-forms-item:nth-child(1){
				display: flex;
				// justify-content: flex-start;
				justify-content: space-between;
				// border: 1px solid #000;
				border: none;
				.uni-forms-item__content{
					// border: 1px solid #000;
					// flex: 1;
					// justify-content: flex-end;
					// text-align: right;
				}
				
			}
			.uni-forms-item:nth-last-child(1){
				display: flex;
				justify-content: flex-start;
			}
			.uni-forms-item:nth-last-child(3){
				display: flex;
				justify-content: flex-start;
				.tip{
					font-size: 28rpx;
					color: #888;
					margin-top: 10rpx;
				}
			}
			.uni-forms-item:nth-last-child(5){
				display: flex;
				justify-content: flex-start;
			}
			.uni-forms-item:nth-last-child(6){
				display: flex;
				justify-content: flex-start;
			}
			.uni-forms-item:nth-last-child(7){
				display: flex;
				justify-content: flex-start;
			}
		}
		.uni-forms-item{
			border-bottom: 1px solid #eee;
			margin-bottom: 10rpx;
			// border: 1px solid #000;
			padding: 0 15rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			// flex-wrap: wrap;
			.uni-forms-item__content{
				flex: none;
			}
			.uni-forms-item__label{
				font-weight: 800;
			}
			.red{
				color: red;
			}
			
		}
		.check-box{
			display: flex!important;
			flex-wrap: wrap!important;
			padding: 10rpx 20rpx;
			border-bottom: 1px solid #eee;
		}
		.uni-combox{
			width: 150rpx;
		}
	}
	.upload{
		width: 100rpx;
		height: 100rpx;
	}
	button{
		width: 70%;
		line-height: 60rpx;
		height: 60rpx;
		background: #1E90FF;
		margin-top: 30rpx;
		color: #fff;
	}
}
.ban3{
	.uni-forms-item:nth-child(2){
		// border: 1px solid #f00;
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}
}
</style>
